import React from 'react'
import { Image, TouchableOpacity, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()
import { Fonts, Metrics, Colors } from '../Themes'
import { API, WINDOW } from '../Services'
import * as RootNavigation from './RootNavigation.js'

// import LoginScreen from '../Containers/Login/LoginScreen'

import HomeScreen from '../Containers/Home/HomeScreen'
import ArticleDetailScreen from '../Containers/Home/ArticleDetailScreen'
import ArticletListContainerScreen from '../Containers/Home/ArticletListContainerScreen'
import ArticleListCateScreen from '../Containers/Home/ArticleListCateScreen'


// import ProductListScreen from '../Containers/Home/ProductListScreen'
import ProductDetailScreen from '../Containers/Home/ProductDetailScreen'
// import CitySelectScreen from '../Containers/Home/CitySelectScreen'
import ZhiDingScreen from '../Containers/Home/ZhiDingScreen'
// import ProductEditScreen from '../Containers/Home/ProductEditScreen'

// import PublishTabScreen from '../Containers/Publish/PublishTabScreen'
// import PublishTypeScreen from '../Containers/Publish/PublishTypeScreen'
// import PublishAddShopScreen from '../Containers/Publish/PublishAddShopScreen'
// import PublishZhiBiaoScreen from '../Containers/Publish/PublishZhiBiaoScreen'
// import PublishMapScreen from '../Containers/Publish/PublishMapScreen'

   
// import ZGhomeScreen from '../Containers/ZhaoGong/ZGhomeScreen'
// import ZGpublishTwoScreen from '../Containers/ZhaoGong/ZGpublishTwoScreen'
// import ZGpublishScreen from '../Containers/ZhaoGong/ZGpublishScreen'
// import ZGDetailScreen from '../Containers/ZhaoGong/ZGDetailScreen'
// import ZGlistScreen from '../Containers/ZhaoGong/ZGlistScreen'
// import ZGEditScreen from '../Containers/ZhaoGong/ZGEditScreen'

// import MeScreen from '../Containers/Me/MeScreen'
// import SetScreen from '../Containers/Me/SetScreen'
// import GuanYu from '../Containers/Me/GuanYuScreen'
// import CollectContainerScreen from '../Containers/Me/CollectContainerScreen'
import NewslistScreen from '../Containers/Me/NewslistScreen'
// import SelfInfoScreen from '../Containers/Me/SelfInfoScreen'
import YaoQingScreen from '../Containers/Me/YaoQingScreen'

// import KefuScreen from '../Containers/Kefu/KefuScreen'
// import WebViewScreen from '../Containers/Kefu/WebViewScreen'
import FanKuiScreen from '../Containers/Kefu/FanKuiScreen'



// import RenZhengScreen from '../Containers/RenZheng/RenZhengScreen'
// import RenZhengCreateScreen from '../Containers/RenZheng/RenZhengCreateScreen'

// import ZhangHuScreen from '../Containers/ZhangHu/ZhangHuScreen'
// import ZhangHuCreateScreen from '../Containers/ZhangHu/ZhangHuCreateScreen'

// import OrderScreen from '../Containers/Order/OrderScreen'
// import OrderListContainerScreen from '../Containers/Order/OrderListContainerScreen'
// import OrderDetailScreen from '../Containers/Order/OrderDetailScreen'
// import OrderCreateScreen from '../Containers/Order/OrderCreateScreen'
// import OrderPayScreen from '../Containers/Order/OrderPayScreen'

// import VideoFullScreen from '../Components/VideoFullScreen'

import ProductListContainerScreen from '../Containers/Home/ProductListContainerScreen'


function HomeTab() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: 'black',
        inactiveTintColor: '#333333'
      }}
    >  
      <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: '首页', tabBarIcon: ({ focused }) => <Image source={focused ? require('../Images/home_tab_home_press.png') : require('../Images/home_tab_home_nor.png')} /> }} />
      <Tab.Screen name="Fenlei" component={ProductListContainerScreen} options={{ tabBarLabel: '分类', tabBarIcon: ({ focused }) => <Image source={focused ? require('../Images/home_tab_fenlei_press.png') : require('../Images/home_tab_fenlei_nor.png')} /> }} />
      <Tab.Screen name="ArticletLis" component={ArticletListContainerScreen} options={{ tabBarLabel: '文章', tabBarIcon: ({ focused }) => <Image source={focused ? require('../Images/home_tab_fdongtai_press.png') : require('../Images/home_tab_dongtai_nor.png')} /> }} />
      {/* <Tab.Screen name="Me" component={MeScreen} options={{ tabBarLabel: '我的', tabBarIcon: ({ focused }) => <Image source={focused ? require('../Images/home_tab_wode_press.png') : require('../Images/home_tab_wode_nor.png')} /> }} /> */}
    </Tab.Navigator>
  )
}  

export default function AppNavigation() {
  return (
    <NavigationContainer ref={RootNavigation.navigationRef}>
      <Stack.Navigator
        screenOptions={{
          headerStyle: { backgroundColor: Colors.mainColor },
          headerTintColor: 'black',
          headerTruncatedBackTitle:'返回'
        }}>
        <Stack.Screen name="HomeTab" component={HomeTab} options={{ headerTransparent: true , title:''}} />
        <Stack.Screen name="FanKui" component={FanKuiScreen} options={{ title: '在线留言' }} />
        <Stack.Screen name="ArticleDetail" component={ArticleDetailScreen} options={{ title: '文章详情' }} />
        <Stack.Screen name="ArticleListCate" component={ArticleListCateScreen} options={{ title: '文章列表' }} />
        <Stack.Screen name="ProductDetail" component={ProductDetailScreen} options={{ title: '产品详情' }} /> 
        <Stack.Screen name="YaoQing" component={YaoQingScreen} options={{  headerTransparent: true, title:'邀请人',headerTintColor:'white',headerTruncatedBackTitle:''}} /> 
        <Stack.Screen name="Newslist" component={NewslistScreen} options={{ title: '信息' }} /> 

        {/* <Stack.Screen name="ProductList" component={ProductListScreen} options={{ title: '产品列表' }} />
        <Stack.Screen name="ProductDetail" component={ProductDetailScreen} options={{ title: '产品详情' }} /> 
        <Stack.Screen name="CitySelect" component={CitySelectScreen} options={{ title: '城市选择' }} />
        <Stack.Screen name="ZhiDing" component={ZhiDingScreen} options={{ title: '置顶' }} />
        <Stack.Screen name="ProductEdit" component={ProductEditScreen} options={{ title: '产品编辑' }} />

        <Stack.Screen name="PublishTab" component={PublishTabScreen}  options={{ headerTransparent: true, title:'', headerLeft:null }} />
        <Stack.Screen name="PublishType" component={PublishTypeScreen}  options={{ title: '分类' }}/>
        <Stack.Screen name="PublishAddShop" component={PublishAddShopScreen} options={{ title: '添加' }}/>
        <Stack.Screen name="PublishZhiBiao" component={PublishZhiBiaoScreen} options={{ title: '产品详情表' }} />
        <Stack.Screen name="PublishMap" component={PublishMapScreen} options={{ title: '地图' }} />
        
        <Stack.Screen name="ZGhome" component={ZGhomeScreen} options={{ title: '建筑招工' }}/>
        <Stack.Screen name="ZGlist" component={ZGlistScreen} options={{ title: '招工列表' }} />
        <Stack.Screen name="ZGpublishTwo" component={ZGpublishTwoScreen} options={{ title: '选择工种' }}/>
        <Stack.Screen name="ZGpublish" component={ZGpublishScreen} options={{ title: '发布招工' }}/> 
        <Stack.Screen name="ZGDetail" component={ZGDetailScreen} options={{ title: '招工详情' }} />
        <Stack.Screen name="ZGEdit" component={ZGEditScreen} options={{ title: '招工编辑' }} />
         

        <Stack.Screen name="Login" component={LoginScreen} options={{ title: '登录' }} />

        <Stack.Screen name="WebView" component={WebViewScreen} options={{ title: '文章详情' }} />
        
        <Stack.Screen name="RenZheng" component={RenZhengScreen} options={{ title: '认证管理', headerStyle: { backgroundColor: 'white'}, headerTintColor: 'black' }} />
        <Stack.Screen name="RenZhengCreate" component={RenZhengCreateScreen} options={{ title: '', headerStyle: { backgroundColor: 'white'}, headerTintColor: 'black' }} />

        <Stack.Screen name="ZhangHu" component={ZhangHuScreen} options={{ title: '账户信息', headerStyle: { backgroundColor: 'white'}, headerTintColor: 'black' }} />
        <Stack.Screen name="ZhangHuCreate" component={ZhangHuCreateScreen} options={{ title: '添加账户', headerStyle: { backgroundColor: 'white'}, headerTintColor: 'black' }} />

        <Stack.Screen name="Order" component={OrderScreen} options={{ title: '交易订单' }} />
        <Stack.Screen name="OrderListContainer" component={OrderListContainerScreen} options={{ title: '我购买的' }} />
        <Stack.Screen name="OrderDetail" component={OrderDetailScreen} options={{ title: '订单详情' }} />
        <Stack.Screen name="OrderCreate" component={OrderCreateScreen} options={{ title: '订单生成' }} />
        <Stack.Screen name="OrderPay" component={OrderPayScreen} options={{ title: '未付款' }} />
        <Stack.Screen name="Set" component={SetScreen} options={{ title: '设置' }} />
        <Stack.Screen name="GuanYu" component={GuanYu} options={{ title: '关于' }} />
        <Stack.Screen name="CollectContainer" component={CollectContainerScreen} options={{ title: '我的收藏' }} />
        <Stack.Screen name="Kefu" component={KefuScreen} options={{ title: '客服' }} />
        <Stack.Screen name="SelfInfo" component={SelfInfoScreen} options={{ title: '个人资料' }} />
         
        <Stack.Screen name="VideoFull" component={VideoFullScreen} options={{ title: '视频' }}/> */}
         
      </Stack.Navigator>
    </NavigationContainer>
  );
}